<template>
	<div class="enjoy">
     <div class="enjoy_pic" v-for="items in enjoy">
         <div :class="items.auto">
         <img :src="items.pic" />
         <div style="clear: both"></div>
         <div :class="items.class">{{items.title}}</div>
         </div>
     </div>
    <div style="clear: both"></div>
  </div>
</template>

<script>
  import {mapState}  from 'vuex'
  export default{
      data(){
          return{

          }
      },
      methods:{

      },
     computed:{
       ...mapState(['enjoy']),
     },
     watch:{

     }
  }
</script>

<style scoped>
  .enjoy_pic{float: left;width: 50%;position: relative;overflow: hidden;}
  .enjoy_pic img{width: 100%;float: left;height: 150px;}
  .one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten{position: absolute;bottom: 0;background: black;opacity: 0.5;width: 100%;color: white; display: none}
  .three{opacity: 0.3;}
  .enjoy_pic:hover div{display: block;}
  .first,.second{padding-bottom: 60px;}
  .third{width: 100%;float: none;}
</style>
